// ------------------------------
// // edX Web Certificates: Layouts

// About: styling for generic layouts and responsive support.

// #UTILITY
// #BASE
// #USER SHARE BANNER
// #ACCOMPLISHMENT
// #SUPPORT
// #FOOTER


// ------------------------------
// #UTILITY
// ------------------------------
%layout-wrapper {
    margin-bottom: spacing-vertical(base);
    padding: 0 (gutter()*2);
}

%layout {
    @include container();
}

// ------------------------------
// #BASE
// ------------------------------
// app header
.wrapper-header {
    border-bottom: 1px solid palette(grayscale-cool, light);
}

.header-app {
  @extend %grid-container;
  margin: 0 auto;
  padding: 17px 2%; // imitate LMS header spacing

    .logo {
        display: inline-block;
        width: 77px; // match lms size
        margin: 0 auto;
        vertical-align: text-bottom;
    }

    .logo-img {
        max-width: 100%;
    }
}

.header-app-title {
    margin: 0;
    @include text-align(center);
}


// ------------------------------
// #USER SHARE BANNER
// ------------------------------
.banner-user {
  @extend %grid-container;
  margin: 0 auto;

  .message-block {
    margin: 0 2%;
    padding: spacing-vertical(small) 2%;
  }

  .message-text {
    text-align: center;

    @include susy-breakpoint($bp-screen-md, $susy) {
      @include span(8 of 12 first);
      text-align: left;
    }
  }

  .message-actions {
    text-align: center;

    @include susy-breakpoint($bp-screen-md, $susy) {
      @include span(4 of 12 last);
      @include text-align(right);
    }
  }
}


// ------------------------------
// #ACCOMPLISHMENT
// ------------------------------
.accomplishment {
  @extend %grid-container;
}


// ------------------------------
// #SUPPORT
// ------------------------------
.accomplishment-support {
  @extend %grid-container;
  margin: 0 3%;
  padding: 0 spacing-horizontal(base);

  @include susy-breakpoint($bp-screen-md, $susy) {
    margin: 0 auto;
    padding: 0 spacing-horizontal(mid-large);
  }
}

.accomplishment-metadata {
  @extend %grid-container;
  margin: 0 3%;
  padding: spacing-vertical(x-small) spacing-horizontal(base);

  @include susy-breakpoint($bp-screen-md, $susy) {
    margin: 0 auto;
    padding: spacing-vertical(x-small) spacing-horizontal(mid-large);
  }
}

.accomplishment-metadata-aboutplatform {

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include span(6 of 12 first);
  }
}

.accomplishment-metadata-aboutcert {

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include span(6 of 12 last);
  }
}

// ------------------------------
// #FOOTER
// ------------------------------
.footer-app {
  @extend %grid-container;
  margin: 0 3%;
  border-top: rem(4) solid palette(grayscale-cool, x-light);
  padding: spacing-vertical(small) spacing-horizontal(base);

  @include susy-breakpoint($bp-screen-md, $susy) {
    margin: 0 auto;
    padding: spacing-vertical(small) spacing-horizontal(mid-large);
  }
}

.footer-app-legal {

  .copyright-trademarks {
    margin-top: spacing-vertical(small);

    .copyright {
      display: block;
    }
  }

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include span(6 of 12 first);
  }
}

.footer-app-related {

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include span(6 of 12 last);
    @include text-align(right);
  }
}
